<template>
  <div class="home" id="home" name="home">
    <!-- 轮播图 -->
    <div class="block">
      <el-carousel height="460px">
        <el-carousel-item v-for="(item,index) in carousel" :key="index">
           <img style="height:460px;" :src="item.image" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 轮播图 end -->
        

    <div class="main-box">
      <div class="main">
        <div class="imgtab">
          <img src="../assets/img/note9.png" alt="">
        </div>
        <!-- 手机展示页 -->
        <div class="phone">
          <div class="box-hd">
            <div class="title">手机</div>
          </div>
          <div class="box-bd">
            <div class="promo-list">
              <routr-link to='/'>
                <img src="../assets/img/mixfold.png" alt="">
              </routr-link>
            </div>
            <div class="list">
              <ul>
                <li v-for="(item,index) in phoneList" :key="index">
                  <router-link to="/">
                    <img :src="item.imageHead" alt="">
                    <h4>{{item.name}}</h4> 
                    <p>{{item.title}}</p> 
                    <span>{{item.price}}元起</span>
                  </router-link>
                </li>
                <li class="more">
                    <router-link to="/mostphone">
                        浏览更多
                    <i class="el-icon-d-arrow-right"></i>
                  </router-link>
                 </li>                
              </ul>
            </div>
          </div>
        </div>
        <!-- 手机展示页END -->

        <div class="imgtab">
          <img src="../assets/img/appli.png" alt="">
        </div>

        <!-- 家电展示页 -->
        <div class="appliance">
          <div class="box-hd">
            <div class="title">家电</div>
            <div class="moreTab">
              <Mymenu :val="2" @fromChild="getChildMsg">
                <span slot="1">热门</span>  
                <span slot="2">电视影音</span>  
              </Mymenu> 
            </div>
          </div>
          <div class="box-bd">
             <div class="promo-list">
              <ul>
                <li>
                  <img src="../assets/img/appliance.png" />
                </li>
                <li>
                  <img src="../assets/img/appliance1.png" />
                </li>
              </ul>
            </div>
            <div class="list">
              <ul>
                <li v-for="(item,index) in applianceList" :key="index">
                  <router-link to="/">
                    <img :src="item.imageHead" alt="">
                    <h4>{{item.name}}</h4> 
                    <p>{{item.title}}</p> 
                    <span>{{item.price}}元</span>
                    <del>{{item.del_price}}元</del>
                  </router-link>
                </li>
                <li class="more">
                    <router-link to="/">
                        浏览更多
                    <i class="el-icon-d-arrow-right"></i>
                  </router-link>
                 </li>                
              </ul>
            </div>
          </div>
        </div>
        <!-- 家电展示页END -->
        <div class="imgtab">
          <img src="../assets/img/pan.png" alt="">
        </div>

        <!-- 配件展示页 -->

         <div class="appliance">
          <div class="box-hd">
            <div class="title">家电</div>
            <div class="moreTab">
              <Mymenu :val="2" @fromChild="getChildMsg">
                <span slot="1">热门</span>  
                <span slot="2">充电器</span>  
              </Mymenu> 
            </div>
          </div>
          <div class="box-bd">
             <div class="promo-list">
              <ul>
                <li>
                  <img src="../assets/img/watch.png" />
                </li>
                <li>
                  <img src="../assets/img/miauto.png" />
                </li>
              </ul>
            </div>
            <div class="list">
              <ul>
                <li v-for="(item,index) in accessories" :key="index">
                  <router-link to="/">
                    <img :src="item.imageHead" alt="">
                    <h4>{{item.name}}</h4> 
                    <p>{{item.title}}</p> 
                    <span>{{item.price}}元</span>
                    <!-- <del>{{item.del_price}}元</del> -->
                  </router-link>
                </li>
                <li class="more">
                    <router-link to="/">
                        浏览更多
                    <i class="el-icon-d-arrow-right"></i>
                  </router-link>
                 </li>                
              </ul>
            </div>
          </div>
        </div>
        <!-- 配件展示页END -->

        
        <div class="imgtab">
          <img src="../assets/img/leijun.png" alt="">
        </div>


      </div>
    </div>

  </div>
</template>
<script>
import Mymenu from '../components/Mymenu.vue';
export default {
  // 添加自定义组件
  components: { Mymenu },
  name:'home',
  data(){
    return{
      carousel:"", // 轮播图数据
      phoneList:"", //手机列表
      applianceList:"", //家电列表
      applianceHotList:"", //热门列表
      TvList: "", // 小米电视商品列表
      applianceActive: 1, // 家电当前选中的商品分类
      accessories:"", //配件列表

    }
  },
  watch: {
    applianceActive:function (val) {  
      if(this.applianceHotList == ""){
        this.applianceHotList = this.applianceList
      }
      if(val == 1){
        // 1为热门商品
        this.applianceList == this.applianceHotList
        return
      }
        if(val == 2){
          // 2为电视商品
        this.applianceList = this.TvList
        return
      }
    }   
  },
  created(){
    this.$axios.get("/data/data.json")
    .then(res => {
      // console.log(res.data.phone)
      this.carousel = res.data.swiper
      this.phoneList = res.data.phone
      this.applianceList = res.data.appliance
      this.accessories = res.data.parts
    })
    .catch(err => {
        // return Promise.reject(err);
        console.log(err)
      });
  }
}
</script>
<style scoped>

@import '../assets/css/index.css';

.main-box{
  background: rgb(218, 216, 216,0.4);
}
.main .imgtab img{
  margin: 0 auto ;
  margin-top: 20px;
  height: 100%;
  width: 100%;
}

/* 手机css */
.phone{
  margin-bottom: 10px;
}

.box-hd .title{
  font-size: 25px;
  font-weight: 500;
}

.promo-list img{
  height: 610px;
  margin-bottom: 10px;
  border-radius: 5px;
}
.promo-list img:hover{
  z-index: 2;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
  transition: all 0.3s linear;
  transform: scale(1.02);
}

.list ul li{
  z-index: 1;
  float: left;
  width: 230px;
  height: 280px;
  padding: 10px 0;
  margin: 0 0 10px 15px;
  transition: all 0.3s linear;
  position: relative;
  background: white;
  text-align: center;
  border-radius: 10px;
}
.list ul li:hover{
  z-index: 2;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
  transform: scale(1.02);
}
.list ul li img{
  display: block;
  width: 160px;
  height: 160px;
  margin: 0 auto;
}
.list ul li h4{
  height: 30px;
  color: black;
  font-weight:500;
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list ul li p{
  color: rgb(117, 116, 116);
  font-weight:500;
  margin-bottom: 5px;
  font-size: 10px;
}
.list ul li span{
  color: rgb(240, 14, 14);
  font-weight:500;
  margin-bottom: 5px;
}
.list ul li del{
  color: rgb(187, 184, 184);
  font-weight:500;
  margin: 5px;
}
.more{
  text-align: center;
  line-height: 280px;
}
.more a{
  font-size: 18px;
  color: #333;
}
/* 手机cssEND */
/* 商品css */
.moreTab{
  line-height: 60px;
  float: right;
  margin-right: 20px;
}
/* 商品cssEND */

</style>